<template>
    <div style="padding: 30px 30px 0 30px;">
        <form-top :state="formData.formStatus" @update="updateForm" :read-only="readOnly"></form-top>
        <div v-if="formData.formStatus === 0 || formData.formStatus === 1">
            <my-card-title title="表单说明">
                <editor :editor="editor"
                        :config="editorConfig"
                        :disabled="readOnly"
                        v-model="editorData"/>
            </my-card-title>
            <group-list style="margin: 10px 0" :groupList="formData.groupList"/>
            <file-list/>
        </div>
        <div v-else-if="formData.formStatus === 2">
            正在审核
        </div>
        <div v-else-if="formData.formStatus === 3">
            审核通过
        </div>
        <div v-else>
            状态异常
        </div>
    </div>

</template>

<script>
    import FileList from './components/FileList';
    import ClassEditor from '@ckeditor/ckeditor5-build-classic';
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import GroupList from './components/GroupList';
    import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
    import editorConfig from '@/config/editorConfig';
    import FormTop from '@/pages/form/components/FormTop';

    export default {
        name: 'EventForm',
        components: {
            FormTop,
            'group-list': GroupList,
            'editor': CKEditor.component,
            FileList,
        },
        props: {
            formId: {
                type: String,
                required: true,
            },
        },
        provide () {
            return {
                formId: this.formId,
            };
        },
        data () {
            return {
                editor: ClassEditor,
                editorConfig,
                readOnly: false,
                editorData: ' ',
                formData: {
                    formDescription: '',
                    groupList: [],
                    formStatus: null,
                },
            };
        },
        created () {
            if (this.$store.getters.getUserType==='admin') {
                this.readOnly = true;
            }
            this.$apis.formAPI.getForm(this.formId).then((data) => {
                if (data) {
                    this.formData = data;
                    if (data.formDescription) {
                        this.editorData = data.formDescription;
                    }
                }
            });
        },
        methods: {
            async updateForm () {
                const updateEditor = {
                    formId: this.formData.formId,
                    formGroupId: this.formData.formGroupId,
                    formStatus: this.formData.formStatus,
                    formDescription: this.editorData,
                    eventId: this.formData.eventId,
                };
                const updateForm = {
                    updateEditor,
                    insertUserList: [],
                };
                await this.$apis.formAPI.updateForm(JSON.stringify(updateForm));
                this.$apis.formAPI.getForm(this.formId).then((data) => {
                    if (data) {
                        this.formData = data;
                        if (data.formDescription) {
                            this.editorData = data.formDescription;
                        }
                    }
                });
            },
        },
    };
</script>

<style lang="scss">
</style>
